<template>
	<el-drawer v-model="drawerVisible" :destroy-on-close="true" size="600px" :title="`${drawerProps.title}地址`">
		<el-form
			ref="ruleFormRef"
			label-width="100px"
			label-suffix=" :"
			:rules="rules"
			:disabled="drawerProps.isView"
			:model="drawerProps.rowData"
			:hide-required-asterisk="drawerProps.isView"
		>
			<el-form-item label="客户名称" prop="cid">
				<el-select v-model="drawerProps.rowData!.cid" class="m-2" placeholder="请选择客户名称">
					<el-option v-for="item in userList" :key="item.id" :label="item.username" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="收件人" prop="name">
				<el-input v-model="drawerProps.rowData!.name" placeholder="请填写收件人" clearable></el-input>
			</el-form-item>
			<el-form-item label="区号" prop="area_code">
				<el-select v-model="drawerProps.rowData!.area_code" class="m-2" placeholder="请选择区号">
					<el-option
						v-for="item in codeList"
						:key="item.area_code"
						:label="'+' + item.area_code + ' ' + item.area_name"
						:value="item.area_code"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="电话" prop="mobile">
				<el-input v-model="drawerProps.rowData!.mobile" placeholder="请填写电话"> </el-input>
			</el-form-item>
			<el-form-item label="邮编" prop="postcode">
				<el-input v-model="drawerProps.rowData!.postcode" placeholder="请填写邮编"> </el-input>
			</el-form-item>
			<el-form-item label="选择区域" prop="nation">
				<el-cascader
					filterable
					@change="changeArea()"
					v-model="areaList"
					:props="codes"
					placeholder="请选择区域"
					:options="linkList"
					style="width: 100%"
				/>
			</el-form-item>

			<el-form-item label="详细地址" prop="detailed">
				<el-input type="textarea" v-model="drawerProps.rowData!.detailed" placeholder="请填写详细地址"> </el-input>
			</el-form-item>
			<el-form-item label="是否默认" prop="is_default">
				<el-select v-model="drawerProps.rowData!.is_default" class="m-2" placeholder="是否默认">
					<el-option label="是" :value="1" />
					<el-option label="否" :value="2" />
				</el-select>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="drawerVisible = false">取消</el-button>
			<el-button type="primary" v-show="!drawerProps.isView" @click="handleSubmit">确定</el-button>
		</template>
	</el-drawer>
</template>

<script setup lang="ts" name="UserDrawer">
import { ref, reactive, onMounted } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { listMobileAreaCode } from "@/api/base";
import { listClientNo } from "@/api/modules/address";
import { countryAddressInfo } from "@/api/base/index";

const rules = reactive({
	cid: [{ required: true, message: "请选择客户名" }],
	name: [{ required: true, message: "请填写收件人" }],
	area_code: [{ required: true, message: "请选择区号" }],
	mobile: [{ required: true, message: "请填写电话" }],
	postcode: [{ required: true, message: "请填写邮编" }],
	is_default: [{ required: true, message: "请选择是否默认" }],
	detailed: [{ required: true, message: "请填写详细地址" }],
	nation: [{ required: true, message: "请选择区域" }]
});
const changeArea = () => {
	areaList.value.push("");
	drawerProps.value.rowData.nation = areaList.value[0];
	drawerProps.value.rowData.province = areaList.value[1];
	drawerProps.value.rowData.city = areaList.value[2];
	drawerProps.value.rowData.district = areaList.value[3];
};

interface DrawerProps {
	title: string;
	isView: boolean;
	rowData?: any;
	api?: (params: any) => Promise<any>;
	getTableList?: () => Promise<any>;
}

// drawer框状态
const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
	isView: false,
	title: ""
});

// 接收父组件传过来的参数
const acceptParams = (params: DrawerProps): void => {
	drawerProps.value = params;
	areaList.value = [];
	if (params.rowData.nation) {
		areaList.value.push(params.rowData.nation, params.rowData.province, params.rowData.city, params.rowData.district);
	}
	drawerVisible.value = true;
};

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
	ruleFormRef.value!.validate(async valid => {
		if (!valid) return;
		try {
			await drawerProps.value.api!(drawerProps.value.rowData);
			ElMessage.success({ message: `${drawerProps.value.title}客户成功！` });
			drawerProps.value.getTableList!();
			drawerVisible.value = false;
		} catch (error) {
			console.log(error);
		}
	});
};
//区号列表
const codeList: any = ref([]);
async function getcodeList() {
	let res: any = await listMobileAreaCode();
	return res.data.list;
}
const userList = ref<any>([]);
const areaList = ref();
const codes = {
	label: "name",
	value: "name",
	children: "_child"
};
const linkList: any = ref([]);
onMounted(() => {
	listClientNo({}).then(res => {
		userList.value = res.data;
	});
	getcodeList().then(res => {
		codeList.value = res;
	});
	countryAddressInfo({ id: 1 }).then(res => {
		linkList.value = res.data;
	});
});

defineExpose({
	acceptParams
});
</script>
